<template>
    <div v-if="caseDetail" id="case-finished-container">
      <div class="crumb"><crumb/></div>
      <div class="main">
        <left-panel
          :case-name="caseDetail.caseName"
          :case-request="caseDetail.caseRequest"></left-panel>
        <right-panel
          @like="likeEvent"
          :finished-usr-list="caseDetail.finishedUserList"></right-panel>
      </div>
    </div>
</template>

<script>
import leftPanel from './components/caseFinished/leftPanel'
import rightPanel from './components/caseFinished/rightPanel'
import { getCaseFinishedDetail } from '@/api/student/training/multiple'
export default {
  name: 'caseFinished',
  data () {
    return {
      resourceCaseId: null,
      caseDetail: null
    }
  },
  methods: {
    async caseFinishedDetail () {
      const res = await getCaseFinishedDetail({
        resourceCaseId: this.resourceCaseId
      })
      if (res === null) return
      this.caseDetail = res
    },
    likeEvent (index, type) {
      if (type === 1) this.caseDetail.finishedUserList[index].likeNum++
      else this.caseDetail.finishedUserList[index].likeNum--
      this.caseDetail.finishedUserList[index].likeType = (type === 1 ? 2 : 1)
    }
  },
  created () {
    this.resourceCaseId = this.$route.query.resourceCaseId
    this.caseFinishedDetail()
  },
  components: {
    leftPanel, rightPanel
  }
}
</script>

<style scoped lang="scss">
#case-finished-container{
  width: 100%;
  display: flex;
  flex-flow: column nowrap;
  align-items: center;
  .crumb{
    width: 1200px;
  }
  .main{
    width: 1200px;
    height: 700px;
    display: flex;
    justify-content: space-between;
  }
}
</style>
